<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/font-awesome-4.3.0.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style-2.2.0.css" rel="stylesheet">
    <link href="../css/index.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/content.css"/>
    <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="../css/component.css"/>
    <link rel="stylesheet" href="../css/style-2.2.0.css">
    <script src="js/modernizr.custom.js"></script>
</head>

<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
    <div class="form-signin">
        <div id="stage">
            <div id="inner">
                <div id="cover">
                    <div id="text">
                        <span style="color: cyan;">H</span><span style="color: white;">+</span>
                    </div>
                    <div id="detail"></div>
                    <div id="handle"></div>
                </div>
                <canvas class="mb-4" id="live2d" width="800" height="800"></canvas>
            </div>
            <a id="info" href="javascript:info()"><i class="fa fa-2x fa-info" style="color: white;"></i></a>
            <a id="refresh" href="javascript:refresh()"><i class="fa fa-2x fa-refresh" style="color: white;"></i></a>
        </div>
        <h2 style="font-weight: bolder; color: white;">惊魂万圣 欢乐交友</h2>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-12">
            <section>
                <div class="mockup-content">
                    <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
                        <button class="btnHide btnBack" type="button" style="font-size: 18px; opacity: 0.9;"
                                onclick="btnHidden()">登录
                        </button>
                        <div class="morph-content">
                            <div>
                                <div class="content-style-form content-style-form-1">
                                    <span class="icon icon-close" style="position: absolute;top: 20px;right: 20px;"
                                          onclick="backHidden()">X</span>
                                    <!--                                        <h2>登录</h2>-->

                                    <div class="onWay text-center">
                                        <h2 class="zh" onclick="funZh()">账号登录</h2>
                                        <h3>or</h3>
                                        <h2 class="email" onclick="funEmail()">邮箱登录</h2>
                                    </div>

                                    <div class="col-12" id="login">
                                        <p style="font-size: 15px;"><label>账号</label><input type="text" name="uname"
                                                                                            id="username"/></p>
                                        <p style="font-size: 15px;"><label>密码</label><input type="password" name="upwd"
                                                                                            id="password"/></p>
                                        <p style="font-size: 15px;">
                                            <button onclick="userLogin()">登录</button>
                                        </p>
                                    </div>
                                    <div class="text-right pr-4" style="color: #e75854;" onclick="fout()">忘记密码？</div>
                                </div>


                            </div>
                        </div>
                    </div><!-- morph-button -->
                    <strong class="joiner" style="font-size: 20px">or</strong>
                    <div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
                        <button class="btnHide btnBack" type="button" style="font-size: 18px; opacity: 0.9;"
                                onclick="btnHidden()">注册
                        </button>
                        <div class="morph-content">
                            <div>
                                <div class="content-style-form content-style-form-2">
                                    <!--                                        <span><i class="fa fa-close fa-2x" style="position: absolute;top: 20px;right: 20px;"></i></span>-->
                                    <span class="icon icon-close" style="position: absolute;top: 20px;right: 20px;"
                                          onclick="backHidden()">X</span>
                                    <h2>选择虚拟形象</h2>
                                    <div>
                                        <div class="text-center">
                                            <i class="fa fa-angle-left fa-5x" style="padding-right: 1rem;"
                                               onclick="leftChange()"></i>
                                            <img src="../imgs/character1.png" alt="..."
                                                 style="border-radius: 50%; height: 50vw; width: 50vw;"
                                                 id="characterImg">
                                            <i class="fa fa-angle-right fa-5x" style="padding-left: 1rem;"
                                               onclick="rightChange()"></i>
                                        </div>
                                        <div class="col-12">
                                            <p style="font-size: 15px;">
                                                <label>账号</label>
                                                <input type="text" name="uname" id="uname" placeholder="输入用户名"/>
                                            </p>
                                            <p style="font-size: 15px;">
                                                <label>密码</label>
                                                <input type="password" name="upwd" id="upwd" placeholder="输入密码"/>
                                            </p>
                                            <p style="font-size: 15px;">
                                                <label>性别</label>
                                                <input type="text" name="sex" id="sex" placeholder="输入男或女"/>
                                            </p>

                                            <p style="font-size: 15px;">
                                                <label>QQ邮箱</label>
                                                <input type="text" name="uemail" id="uemail" placeholder="输入QQ邮箱"/>
                                            </p>
                                            <p style="font-size: 15px;">
                                                <label>验证码</label>
                                                <input type="text" name="code" id="code" placeholder="输入验证码"/>
                                            </p>
                                            <input type="button" id="lay" onclick="getRegisterCode()" value="获取验证码">
                                            <p style="font-size: 15px;">
                                                <button onclick="userRegister()">注册</button>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- morph-button -->
                </div><!-- /form-mockup -->
            </section>
        </div>
    </div>
</div>

<div class="modal fade" id="div1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">注意事项</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>同一个用户只能注册一个账号，请谨慎操作</p>

                <p>如果您不慎忘记了账户或者密码</p>

                <p>请点击忘记密码，输入账号后，在<font style="font-weight: bold; color: #e75854;">QQ邮箱</font>中查看密码</p>

                <p style="font-weight: bold;">目前仅支持QQ邮箱，请谨慎填写QQ邮箱</p>

                <p>或者您可以选择在注册后，下次使用邮箱验证码登录</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="saveTip()">确认</button>
            </div>
        </div>
    </div>
</div>
<button type="button" data-toggle="modal" data-target="#div1" id="btn" style="display: none;"></button>

<div class="modal fade" id="forgetPwd">
    <div class="modal-dialog">
        <div class="modal-content p-4">
            <div class="col-12 text-center headText2 mt-3">
                <h2 style="font-weight: bolder;">找回密码</h2>
            </div>
            <div class="col-12">
                <div class="form-group" style="color: black; font-weight: normal">
                    <label for="info">账号</label>
                    <input type="text" class="form-control" id="fname" name="funame"
                           placeholder="输入账号找回密码" maxlength="100" required>
                </div>
                <button type="submit" class="btn" style="font-size: 15px; display: block; background: #e75854;"
                        onclick="forgetPwd()" id="fsubmit">确认提交
                </button>
                <!--                    <button type="submit" class="btn" style="font-size: 15px; display: none;" id="ftime">60</button>-->
                <div class="mt-2">
                    <span style="font-size: 15px; display: none;" id="ftime">60</span><span
                        style="font-size: 15px; display: none;" id="ftime2">s后重试</span>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="button" data-toggle="modal" data-target="#forgetPwd" id="fbtn" style="display: none;"></button>
<button id="tan" hidden></button>
<!-- Mainly scripts -->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.bundle.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript">
    function stop() {
        return false;
    }

    document.oncontextmenu = stop;
</script>
<script src="../js/live2d.min.js"></script>
<script src="../js/index.js"></script>
<script src="../js/classie.js"></script>
<script src="../js/uiMorphingButton_fixed.js"></script>
<script src="../coco-message.js"></script>
<script src="../js/qq.js"></script>
<script src="../js/qc_jssdk.js"></script>
</body>

<script type="text/javascript" charset="utf-8"
        src="http://connect.qq.com/qc_jssdk.js"
        data-appid="1112134422"
        data-redirecturi="http://localhost:520/"
></script>

<script type="text/javascript">
    QC.Login({
        btnId: "qq_login"	//插入按钮的节点id
    });
</script>
<script>
    $("#refresh").click();
    if (window.localStorage.flag2 == undefined) {
        $('#btn').trigger("click");
    }

    function saveTip() {
        window.localStorage['flag2'] = "ok";
    }

    function fout() {
        $('#fbtn').trigger("click");
    }

    (function () {
        var docElem = window.document.documentElement, didScroll, scrollPosition;

        // trick to prevent scrolling when opening/closing button
        function noScrollFn() {
            window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
        }

        function noScroll() {
            window.removeEventListener('scroll', scrollHandler);
            window.addEventListener('scroll', noScrollFn);
        }

        function scrollFn() {
            window.addEventListener('scroll', scrollHandler);
        }

        function canScroll() {
            window.removeEventListener('scroll', noScrollFn);
            scrollFn();
        }

        function scrollHandler() {
            if (!didScroll) {
                didScroll = true;
                setTimeout(function () {
                    scrollPage();
                }, 60);
            }
        };

        function scrollPage() {
            scrollPosition = {x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop};
            didScroll = false;
        };

        scrollFn();

        [].slice.call(document.querySelectorAll('.morph-button')).forEach(function (bttn) {
            new UIMorphingButton(bttn, {
                closeEl: '.icon-close',
                onBeforeOpen: function () {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterOpen: function () {
                    // can scroll again
                    canScroll();
                },
                onBeforeClose: function () {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterClose: function () {
                    // can scroll again
                    canScroll();
                }
            });
        });

        // for demo purposes only
        [].slice.call(document.querySelectorAll('form button')).forEach(function (bttn) {
            bttn.addEventListener('click', function (ev) {
                ev.preventDefault();
            });
        });
    })();
</script>
</html>
